<template>
  <view class="pop-wrap-kefu">
    <u-popup
      :show="show"
      mode="center"
      @close="onClosePop"
      @open="onOpenPop"
      zIndex="10071"
      :closeOnClickOverlay="true"
      :safeAreaInsetBottom="false"
      round="10rpx">
      <view class="pop-ctx">
        <view class="header-box">
          <view class="title">联系客服</view>
          <image
            class="close"
            src="@/static/my/close-w.png"
            mode=""
            @click="doClose()"></image>
        </view>
        <view class="body-box">
          <view class="btn-box">
            <button
              open-type="contact"
              class="btn-mp-kefu flex-between"
              type="default"
              @click="open_kefu()">
              <view class="nav-title">在线客服</view>
              <view class="icon-box">
                <image
                  class="icon"
                  src="@/static/my/kefu-arrow.png"
                  mode=""></image>
              </view>
            </button>
          </view>

          <view class="info-box">
            <view class="kefu-time flex">
              <text class="label">{{ vuex_config.comTitle }}客服电话</text>
              <text class="time">
                （服务时间09：00-20：30）
                <!-- {{vuex_config.site_time}} -->
              </text>
            </view>
            <!-- <view class="service-time">
							（服务时间09：00-20：30）
						</view> -->
            <view class="kefu-phone flex" @click="to_phone()">
              <text>{{ vuex_config.comKefu }}</text>
              <image
                class="icon"
                src="@/static/my/kefu-phone.png"
                mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "kefu-pop",
  data() {
    return {
      show: false,
    };
  },
  methods: {
    init() {
      this.show = true;
    },
    to_phone() {
      uni.makePhoneCall({
        phoneNumber: `${this.vuex_config.site_tel}`,
      });
    },
    onOpenPop() {},
    onClosePop() {
      this.show = false;
    },
    doClose() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-popup__content {
  // border-radius: 32rpx 32rpx 32rpx 32rpx;
  background: transparent;
}

.pop-ctx {
  position: relative;
  width: calc(100vw - 72rpx);
  margin: 0 auto;
  height: auto;
  border-radius: 10rpx;
  overflow: hidden;
  background: #fff;

  .header-box {
    background: #f49c0d;
    justify-content: space-between;
    padding: 0 24rpx;
    position: relative;
    // border-bottom: 2rpx solid #F5F5F5;
    // padding-top: 40rpx;

    .title {
      line-height: 88rpx;
      height: 88rpx;
      text-align: left;
      font-size: 32rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      font-weight: bold;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }

    .close {
      top: 20rpx;
      right: 32rpx;
      position: absolute;
      width: 36rpx;
      height: 36rpx;
    }
  }
}

.body-box {
  .btn-box {
    padding: 24rpx;

    .btn-mp-kefu {
      height: 76rpx;
      background: #f49c0d;
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;

      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #ffffff;

      .icon-box {
        width: 14rpx;
        height: 24rpx;

        .icon {
          width: 14rpx;
          height: 24rpx;
        }
      }
    }
  }
}

.info-box {
  padding: 20rpx 40rpx;
  background: rgba(244, 156, 13, 0.1);
}

.kefu-time {
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #000000;

  .label {
  }

  .time {
    flex: 1;
    overflow: hidden;
    margin-left: 16rpx;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #545b6a;
  }
}

.service-time {
  margin-top: 10rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
}

.kefu-phone {
  margin-top: 20rpx;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #000000;

  .icon {
    width: 20rpx;
    height: 20rpx;
    margin-left: 30rpx;
  }
}
</style>
